<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="110px" class="app-content" :rules="rules" :model="ruleForm1" ref="ruleForm1">
            <div class="box">
                <div class="appTitle">学校账户信息补全&ensp;&ensp;第<span class='step'><span v-if='temp==1'> 1/3 </span><span v-if='temp==2'> 2/3 </span> <span v-if='temp==3'> 3/3 </span></span>步</div>
                <div v-if="temp==1">
                    <div class="appTop">
                        <el-col :span="15">上传事业单位法人证书</el-col>
                        <el-col :span="3" :offset="6" class="hotLine">客服热线 400-6002-588</el-col>
                    </div>
                    <el-row class="boxContent">
                        <el-col :span="4">
                            <img-upload v-model="ruleForm1.sPicture1" :showFileName="true"></img-upload>
                        </el-col>                   
                        <el-col :span="12" :offset='6'>
                            <el-col :span="18" class='require'>
                                <p>证书要求：</p>
                                <p>1.公办学校上传事业单位法人证，民办学校上传办学许可证，培训机构上传营业执照；</p>
                                <p>2.证书需要与e学云签订的合同一致；</p>
                                <p>3.照片不可被遮挡，内容清晰可见，不得做任何修改；</p>
                                <p>4.支持png、jpg、bmp等不大于5M的照片；</p>
                                <div class="clickImg" @click="clickImg1">
                                    <img :src="urlImg1"/>
                                </div>
                                <p class='imgAddBig1'>示例图（点击可放大）</p>
                            </el-col>
                        </el-col>
                    </el-row>

                    <div class="appTop"><P>上传开户许可证</p></div>
                    <el-row class="boxContent">
                        <el-col :span="4">
                            <img-upload v-model="ruleForm1.sPicture2" :showFileName="true"></img-upload>
                        </el-col>                   
                        <el-col :span="12" :offset='6'>
                            <el-col :span="18" class='require'>
                                <p>开户许可证要求：</p>
                                <p>1.照片不可被遮挡，内容清晰可见，不得做任何修改；</p>
                                <p>2.支持png、jpg、bmp等不大于5M的照片；</p>
                                <div>暂无开户许可证？ <el-button type="text" @click='solveWay'>点击查看解决办法</el-button></div>
                            </el-col>
                        </el-col>
                    </el-row>
                </div>
                
                <div v-if="temp==2">
                    <identfy :ruleForm2='ruleForm2' ref='identfy' @getSubmitIdfy='getSubmitIdfy'></identfy>
                </div>
                <div v-if="temp==3">
                    <fillInfo :ruleForm3='ruleForm3' ref='fillInfo' @getSubmitForm='getSubmitForm'></fillInfo>
                </div>
                <el-form-item class="footer1" v-if='temp==1'>
                    <el-button type="primary" @click='nextStep' v-if="temp<3">下一步</el-button>
                </el-form-item>
                <el-form-item class="footer2" v-if='temp!=1'>
                    <el-button @click='lastStep' v-if="temp>1">上一步</el-button>
                    <el-button type="primary" @click='nextStep' v-if="temp<3">下一步</el-button>
                    <el-button type="primary" @click='saveIdfy' v-if="temp==3" :loading="loadingBtn">提交</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-dialog title="   " :visible.sync="dialogFormVisible" size="tiny">
            <div class='checkImg'><img :src="bigImgUrl"/></div>
        </el-dialog>
        <openPaper :addImportData='addImportData'></openPaper>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import identfy from './comps/identfy';
import fillInfo from './comps/fillInfo';
import openPaper from './comps/openPaper';
import imgUpload from 'components/Upload/imgUpload';
import { mapGetters } from 'vuex';
import { saveOrgAccount } from 'api/accountMangement';
export default{
    name: 'makeAccount',
    components: {Levelbar, imgUpload, identfy, fillInfo, openPaper},
    data() {
        return { 
            ruleForm1: {
                sPicture1: '', // 营业执照
                sPicture2: '' // 开会许可证
            },
            ruleForm2: {
                wTname: '', // 姓名
                identity: '', // 身份证号码
                sCardFace: '', // 正面照
                sCardBack: '' // 背面照
            },
            ruleForm3: {
                bankAccountName: '', // 银行开户名
                accountName: '', // 账户号码
                bankAccountId: '', // 所属银行
                fProvinceId: '',
                bankBranchName: '', // 开户行名称
                phone: '',
                fyCode: '', // 验证码
                fCityId: '',
                idfyCode: '获取验证码'
            },
            addImportData: {
                dialogLotImport: false,
                fileDocx: '' // 委托书
            },
            urlImg1: 'http://test.img.juziwl.cn/exue/20171223/97a95d4abb3440d294833b6a26bd0d89.jpg',
            bigImgUrl: '', // 大图
            temp: '1', // 页码
            dialogFormVisible: false,
            loadingBtn: false,
            rules: {}
        }
    },
    computed: {
        ...mapGetters([
            'schoolId'
        ])
    },
    methods: {
        solveWay() {
            this.addImportData.dialogLotImport = true;
        },
        getSubmitIdfy() {
            this.ruleForm3.name = this.ruleForm2.wTname;
            this.temp++;
        },
        // 提交
        getSubmitForm() {
            this.$confirm('确定要提交吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.loadingBtn = true;
                saveOrgAccount(
                this.ruleForm1.sPicture1, 
                this.ruleForm1.sPicture2,
                this.addImportData.fileDocx,
                this.ruleForm2.sCardFace,
                this.ruleForm2.sCardBack,
                this.ruleForm2.wTname, 
                this.ruleForm3.bankAccountName,
                this.ruleForm2.identity, 
                this.ruleForm3.accountName,
                this.ruleForm3.bankAccountId, 
                this.ruleForm3.fProvinceId,
                this.ruleForm3.fCityId,
                this.ruleForm3.bankBranchName, 
                this.ruleForm3.phone,
                this.schoolId
                ).then(response => {
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    })
                    this.$router.push({path: 'accountDetail'});
                }).catch(() => {
                    this.loadingBtn = false;
                });
            })
        },
        // 调用组件验证方法
        saveIdfy() {
            this.$refs.fillInfo.submitForm()
        },
        // 图片放大
        clickImg1() {
            this.dialogFormVisible = true;
            this.bigImgUrl = this.urlImg1;
        },
        lastStep() {
            this.temp--;
        },
        nextStep() {
            if (this.temp==1) {
                if (this.ruleForm1.sPicture1=='') {
                    this.$message({
                        type: 'warning',
                        message: '请上传事业单位法人证书'
                    });
                    return;
                } else if (this.ruleForm1.sPicture2=='' && this.addImportData.fileDocx=='') {
                    this.$message({
                        type: 'warning',
                        message: '请上传开户许可证'
                    });
                    return;
                } else {
                    this.temp++;
                    return
                }
            } else if (this.temp==2) {
                this.$refs.identfy.submitForm();
            } else {
                this.temp++;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding: 30px 15% 50px 15%;
        .appTop{
            padding:40px 0 20px 0px;
            margin-bottom:30px;
            font-size:36px;
            .hotLine{
                color:#ccc;
                font-size:12px;
            }
        }
        .boxContent{
            padding-top:50px
        }
        .box{
            margin:0 20px 0 20px;
            min-height:600px;
            background:#fff;
        }
        .appTitle{
            padding:40px 0 30px 0px;
            margin-bottom:30px;
            padding-top:10px;
            font-size:17px;
            border-bottom:1px solid #ECECEC
        }
        .require{
            color:#999999;
            font-size:14px;
            line-height:30px;
        }

       .footer1{
            .el-button{
                width:100px;
            }
            margin-left: 29.3%;
            padding:80px 0 50px 0
        }
        .footer2{
            .el-button{
                width:100px;
            }
            margin-left: 7%;
            padding:80px 0 50px 0
        }
        .clickImg{
            width:130px;
            height:75px;
            margin:10px 0;
            img{
                width:100%;
                height:100%;
            }
        }
    }
    .checkImg{
        width:100%;
        height:350px;
        img{
            width:100%;
            height:100%;
        } 
    }
    .step{
        color:#ff5e2c;
    }
    .dialog-footer{
        text-align:center;
        padding-bottom:10px;
    }
}

</style>
